import { html } from 'lit';
import { ifDefined } from 'lit/directives/if-defined.js';
import { styleMap } from 'lit/directives/style-map.js';
import { unsafeHTML } from 'lit/directives/unsafe-html.js';
import { Meta, Canvas, ArgsTable, Story } from '@storybook/addon-docs';

<Meta
  title="Components/Tab/TabPanel"
  component="bl-tab-panel"
  argTypes={{
    tab: {
        control: 'text'
    }
  }}
/>

export const TabGroup = (args) => html`
    <bl-tab-group>
      <bl-tab name="test-1" slot="tabs">Tab 1</bl-tab>
      <bl-tab name="test-2" slot="tabs">Tab 2</bl-tab>
      <bl-tab name="test-3" slot="tabs">Tab 3</bl-tab>
      <bl-tab-panel tab="test-1">This is general Tab Panel</bl-tab-panel>
      <bl-tab-panel tab="test-2">Panel 2</bl-tab-panel>
      <bl-tab-panel tab="test-3">Panel 3</bl-tab-panel>
    </bl-tab-group>
  `

# Tab Panel
Tab panels are utilized inside tab groups to show tabbed content

<bl-alert variant="warning" icon>Inline styles in examples are only for **demo purposes**. Use regular CSS classes or tag selectors to set styles.</bl-alert>

<Canvas>
<Story name="Basic Usage">
    {TabGroup.bind({})}
  </Story>
</Canvas>

## Reference

<ArgsTable of="bl-tab-panel" />

